<script setup lang="ts">
import userAvatar1 from "@@/assets/images/layouts/1202320.png"
import userAvatar2 from "@@/assets/images/layouts/1202321.png"
import goodGray from "@@/assets/images/layouts/good-gray.png";
import starGray from "@@/assets/images/layouts/star-gray.png";
import commentGray from "@@/assets/images/layouts/commentGray.png";
import shareGray from "@@/assets/images/layouts/shareGray.png";
import img1 from "@@/assets/images/layouts/tu3.png"
import pic from "@@/assets/images/layouts/pic.png"
import { useUserStore } from "@/pinia/stores/user.js"
import toDetail from "@@/assets/images/layouts/to-detail.png";
const toDetailImg = ref(toDetail)
import {
  getCirclePostDetailApi, sendReplyCommentApi, getCirclePostReplyAllApi
} from "@/api"
const goodImg = ref(goodGray)
const shareImg = ref(shareGray)
const commentImg = ref(commentGray)
import { onBeforeMount, ref} from "vue"
import { personalRequestData} from "@/pages/login/apis/type";
import {removeToken} from "@@/utils/cache/cookies";
import type {FormRules} from "element-plus";
import Head from "@@/components/Head/index.vue"
import Footer from "@@/components/footer/index.vue"
import axios from 'axios';
const userStore = useUserStore()
const router = useRouter()
const id = ref(0)
const dialogVisible = ref(false)
const route = useRoute()
const token = ref("")
// const testImage = ref([userAvatar1,userAvatar1,userAvatar1,userAvatar1])
import close from '@@/assets/images/layouts/close.png';
const list = ref([]) // 10条AI推荐列表数据
const username = ref("")
const recomment = ref("")
const infoCommentData = ref({})
const uploadReferenceFile = ref(null)
const formSendData = ref({
  id: null
})
const showCommentInput = ref(false)
const showAllDone = ref(false)
onBeforeMount(() => {
  // 组件已完成响应式状态设置，但未创建DOM节点
  username.value = userStore.getUserName().value
  token.value = userStore.token
  if (token.value === '') {
    dialogVisible.value = true
  }
  id.value = !route.params.id ? 0 : parseInt(String(id.value = !route.params.id
    ? 0
    : Array.isArray(route.params.id)
      ? parseInt(route.params.id[0])
      : parseInt(route.params.id)));
  getDetail()
})
function getDetail() {
  // 获取详情
  if (!id.value) {
    router.push('/')
    return false
  }
  const id_ = !route.params.id ? 0 : parseInt(String(id.value = !route.params.id
    ? 0
    : Array.isArray(route.params.id)
      ? parseInt(route.params.id[0])
      : parseInt(route.params.id)));
  getCirclePostDetailApi({ comment_id: id_ } ).then((res) => {
    infoCommentData.value = res.data
    infoCommentData.value.comment_img_list = res.data.comment_imgs == '' ? []: res.data.comment_imgs.split(",")
    infoCommentData.value.create_time = res.data.create_time ? res.data.create_time.substring(0,16).replaceAll('-','.').replaceAll(' ','-'): ''
    if (infoCommentData.value.reply_comment_list && infoCommentData.value.reply_comment_list.length > 0) {
      infoCommentData.value.reply_comment_list.forEach(item => {
        item.create_time = item.create_time ? item.create_time.replaceAll('-','.'): ''
        item.create_time = item.create_time ? item.create_time.replaceAll(' ','-'): ''
        item.create_time = item.create_time ? item.create_time.substring(0,16): ''
        // 处理图片数组
        if (item.comment_imgs && item.comment_imgs.length > 0) {
          item.comment_img_list = item.comment_imgs.split(',')
        } else {
          item.comment_img_list = []
        }
      })
    }
  })
}
// getCirclePostReplyAllApi
function getReplyAll() {
  getCirclePostReplyAllApi({comment_id: id.value}).then((res) => {
    console.log(res.data)
    if (res.code == 0) {
      infoCommentData.value.reply_comment_list = res.data
      if (infoCommentData.value.reply_comment_list && infoCommentData.value.reply_comment_list.length > 0) {
        infoCommentData.value.reply_comment_list.forEach(item => {
          item.create_time = item.create_time ? item.create_time.replaceAll('-','.'): ''
          item.create_time = item.create_time ? item.create_time.replaceAll(' ','-'): ''
          item.create_time = item.create_time ? item.create_time.substring(0,16): ''
          // 处理图片数组
          if (item.comment_imgs && item.comment_imgs.length > 0) {
            item.comment_img_list = item.comment_imgs.split(',')
          } else {
            item.comment_img_list = []
          }
        })
      }
      showAllDone.value = true
    }
  })
}
function logout() {
  token.value = ""
  username.value = ""
  removeToken()
  userStore.setToken("") // token-admin
  userStore.setUsername("")
}
function showCommentDialog() {
  formSendData.value.id = id.value
}
const selectedFile = ref(null);
const imageUrl = ref([])
const imageFileName = ref([])
function handleFileUpload(event) {
  const files = event.target.files;
  console.log(files)
  if(files.length > 9) {
    ElMessage.error({ message: "一次最多上传9张图片", type: "warning", duration: 2000 })
    return false
  }
  // 遍历文件列表，判断文件类型是否是图片
  // for in
  for (let i in  files) {
    if (files[i].type == 'image/jpeg' || files[i].type == 'image/png' || files[i].type == 'image/jpg' ) {
      if (files[i] && files[i].type) {
        selectedFile.value = files[i]; // 存储选中的文件，可以在这里做进一步处理，如上传等。
        // console.log(selectedFile.value); // 或者使用FormData发送文件等操作
        const formData = new FormData();
        formData.append('imgFile', selectedFile.value);
        try {
          axios.post('https://www.sacasaca.com/shop122/uploadfile', formData, {
            headers: { 'Content-Type': 'multipart/form-data' },
          }).then(response => {
            console.log(response.data.code)
            if(response.data.code == 0) {
              if (imageUrl.value && imageUrl.value.length <= 9) {
                // 最多上传9张图片
                imageUrl.value.push(response.data.data.url) ;
              }
            } else {
              ElMessage.error({
                message: "上传失败",
                type: "warning",
                duration: 2000
              })
            }
          })
        } catch (error) {
          console.error(error);
        }
      }
    }
  }
}
function triggerFileInput() {
  uploadReferenceFile.value.click();
}
function handleReComment() {
  // 提交评论的评论
  if( token.value == "" || userStore.getUserId().value == 0) {
    return ElMessage.error({
      message: "请先登录",
      type: "warning",
      duration: 2000
    })
  }
  // 处理上传的图片 commentImgList去除空元素
  imageUrl.value.forEach((item) => {
    if (item === "") {
      imageUrl.value.splice(imageUrl.value.indexOf(item), 1)
    }
  })
  if (recomment.value !== "") {
    const data2 = {
      source_id: infoCommentData.value.article_id,
      contents: recomment.value,
      user_id: userStore.getUserId().value,
      ctype: 1,
      img_list: imageUrl.value.join( ","), // 多图列表
      action: 2,
      parent_id: infoCommentData.value.comment_id
    }
    sendReplyCommentApi(data2).then((res) => {
      if (res.code === 0) {
        recomment.value =  ""
        imageUrl.value = []
        ElMessage.success({
          message: "回复评论成功",
          type: "success",
          duration: 1000
        })
      } else {
        ElMessage.error({
          message: "回复评论失败",
          type: "warning",
          duration: 2000
        })
      }
    })
  } else {
    ElMessage.error({
      message: "请输入评论内容",
      type: "warning",
      duration: 2000
    })
  }
}

const changeCloseState = (id, state) => {
  if (state == 0) {
    document.getElementById("close"  + id).style.opacity = "0";
  } else {
    document.getElementById("close"  + id).style.opacity = "1";
  }
}
const deletePicture = (id) => {
  console.log(id)
  if (id >= 0) {
    // imageUrl.value.splice(id, 1);
    imageUrl.value.splice(id, 1);
  }
  console.log(imageUrl.value)
}
function doShowCommentInput() {
  showCommentInput.value = !showCommentInput.value
}
const styleButton = ref([])
function checkMouseOn(id) {
  console.log(id)
  for(let i = 0; i<3 ; i++) {
    if(id == i) {
      styleButton.value[i] = "background-color: rgb(51 51 51 / 5%);border-radius: 449px;border:1px solid #33333330;"
    }else {
      styleButton.value[i] = ""
    }
  }
}
function checkMouseOff() {
  for(let i = 0; i<3 ; i++) {
    styleButton.value[i] = ""
  }
}
</script>

<template>
  <div class="container" style="max-width: 2560px;height: auto;">
    <Head :activeId="4" />
    <div class="module-container" style="height: auto; margin: 32px auto;padding: 24px;border-radius: 16px;background-color: #ffffff;">
      <div style="width: 100%;display: flex;flex-direction: row;margin-top: 10px;height: 50px;line-height: 40px;justify-content: space-between;">
        <div style="min-width: 80%;display: flex;flex-direction: row;justify-content: flex-start">
          <div style="width:80px;padding: 0;" v-if="infoCommentData.avatar">
            <el-image :src="infoCommentData.avatar" width="60" height="60" class="avatar_photo"></el-image>
          </div>
          <div style="width:80px;padding: 0;" v-else-if="infoCommentData.user_head_ico == 1">
            <el-image :src="userAvatar1" width="60" height="60" class="avatar_photo"></el-image>
          </div>
          <div style="width:80px;padding: 0px;" v-else-if="infoCommentData.user_head_ico == 2">
            <el-image :src="userAvatar2" width="60" height="60" class="avatar_photo"></el-image>
          </div>
          <div style="width:80px;padding: 0px;" v-else>
            <el-image :src="img1" width="60" height="60" class="avatar_photo"></el-image>
          </div>
          <div style="width:80px;padding: 0px;">{{infoCommentData.user_name}}</div>
          <div style="width:600px;padding: 8px;"></div>
        </div>
        <div style="width: 140px;padding: 2px 0px;text-align: right">{{infoCommentData.create_time}}</div>
      </div>
      <div style="width:100%;">
        <div style="width: 100%;padding: 0;font-size: 14px;line-height: 24px;">
          <p style="text-align: justify;">{{infoCommentData.commentcontent}}</p>
        </div>
      </div>
      <div  style="width:100%;margin-top: 8px;" v-if="infoCommentData.comment_img_list">
        <div style="width: 98%;padding: 8px 0;display: flex;flex-direction: row;">
          <div v-for="item in infoCommentData.comment_img_list"  class="comment_photo_div">
            <el-image :src="item" width="80" height="80" class="comment_photo"></el-image>
           </div>
        </div>
      </div>
      <div style="width:1152px;background-color: rgb(237 234 234 / 29%);border-radius:8px;height:208px;margin-top: 24px;display: flex;flex-direction: row;">
        <div style="width: 100%;padding: 0;display: flex;flex-direction: row;">
          <div class="article_photo1" v-if="infoCommentData.article_img != ''">
            <el-image :src="infoCommentData.article_img" width="160" height="160" class="article_photo"></el-image>
          </div>
          <div class="article_photo2">
            <div style="font-size:18px; font-weight: 500;margin-top: 24px;">{{infoCommentData.article_title}}</div>
            <div style="margin-top: 8px;text-align: justify ;line-height: 26px;font-size: 14px;font-weight: 400;color:#666666;" v-html="infoCommentData.article_description"></div>
          </div>
        </div>
        <div class="click_go">
          <div class="click_go_button">
            <router-link target="_blank" :to="{ name: 'newsDetail', params: { id: infoCommentData.article_id } }">
              <el-image :src="toDetailImg" width="24" height="24" class="to_detail_img"></el-image>
            </router-link>
          </div>
        </div>
      </div>
      <div style="width:100%;">
        <div style="width: 98%;padding: 8px;height:40px;display: flex;margin-bottom: 8px;flex-direction: row;justify-content: flex-end;">
          <div class="good-area" @mouseover="checkMouseOn(0)" @mouseout="checkMouseOff()" :style="styleButton[0]">
            <div class="good_icon" :style="{backgroundImage: 'url('+ goodImg +')'}"></div>
            <div class="good-text">
              点赞 ({{infoCommentData.article_likes}})
            </div>
          </div>
          <div class="good-area"  @mouseover="checkMouseOn(1)" @mouseout="checkMouseOff()" :style="styleButton[1]" @click="doShowCommentInput()">
            <div class="good_icon"  :style="{backgroundImage: 'url('+ shareImg +')'}"/>
            <div class="good-text">
              评论 ({{infoCommentData.article_comments}})
            </div>
          </div>
          <div class="good-area"  @mouseover="checkMouseOn(2)" @mouseout="checkMouseOff()" :style="styleButton[2]">
            <div class="good_icon"  :style="{backgroundImage: 'url('+ commentImg +')'}"/>
            <div class="good-text">
              分享 ({{infoCommentData.article_shares}})
            </div>
          </div>
        </div>
      </div>
      <div class="comment-content2">
        <div class="comment-content2-2" v-if="showCommentInput">
          <div class="comment-content2-2-column">
            <div class="comment-content2-avatar">
              <div v-if="infoCommentData.user_head_ico == '1'">
                <el-image :src="userAvatar1"  class="avatar_photo3"></el-image>
              </div>
              <div v-else-if="infoCommentData.user_head_ico == '2'">
                <el-image :src="userAvatar2"  class="avatar_photo3"></el-image>
              </div>
              <div v-else-if="infoCommentData.user_avatar !=''">
                <el-image :src="infoCommentData.user_avatar"  class="avatar_photo3"></el-image>
              </div>
              <div v-else>
                <el-image :src="img1"  class="avatar_photo2"></el-image>
              </div>
            </div>
            <div class="comment-content2-input">
              <el-input v-model="recomment" style="width:98%;height: 40px;margin-top: 4px;" placeholder="期待你的评论">
                <template #suffix>
                  <input ref="uploadReferenceFile" style="display: none;" type="file" @change="handleFileUpload" multiple />
                  <el-button @click="triggerFileInput" :style="{width: '18px', height: '18px', border: 0, backgroundImage: 'url(' + pic + ')', backgroundSize: 'contain', padding: '0'}"></el-button>
                </template>
              </el-input>
            </div>
            <div class="comment-content2-submit">
              <el-button :disabled="recomment.length == 0" @click="handleReComment()" type="primary" style="border-radius: 18px;padding: 8px 8px;width:90px;height: 38px;"> 提 交 </el-button>
            </div>
          </div>
        </div>
        <div class="comment-content2-pre-image">
          <div style="display: flex;flex-direction: row;">
            <div style="width:64px;height: 26px;"></div>
            <div v-for="(item,index) in imageUrl" class="comment_pre_photo">
              <el-image @mouseout="changeCloseState(index,0)"  @mouseover="changeCloseState(index,1)" :src="item" width="100" height="100" class="comment_pre_photo_in"></el-image>
              <div @mouseout="changeCloseState(index,0)"  @mouseover="changeCloseState(index,1)" @click="deletePicture(index)" :ref="'close'+index" :id="'close'+index" :style="{ backgroundImage: 'url(' + close + ')', position: 'absolute',width : '16px', height: '16px', backgroundSize: 'contain',display: 'block',opacity: 0, }" ></div>
            </div>
          </div>
        </div>
      </div>

      <div class="comment-content-second" v-if="infoCommentData.reply_comment_list && infoCommentData.reply_comment_list.length > 0"
      v-for="item2 in infoCommentData.reply_comment_list" >
        <div class="comment-content-second-left">
          <div class="comment-content-second-avatar">
            <div v-if="item2.user_head_ico == '1'">
              <el-image :src="userAvatar1"  class="avatar_photo3"></el-image>
            </div>
            <div v-else-if="item2.user_head_ico == '2'">
              <el-image :src="userAvatar2"  class="avatar_photo3"></el-image>
            </div>
            <div v-else-if="item2.user_avatar !=''">
              <el-image :src="item2.user_avatar"  class="avatar_photo3"></el-image>
            </div>
            <div v-else>
              <el-image :src="img1"  class="avatar_photo2"></el-image>
            </div>
            <div style="width:100%;min-height: 28px;"></div>
          </div>
          <div class="comment-content-second-name">{{item2.user_name}}</div>
        </div>
        <div class="comment-content-second-right">
          <div class="comment-content-second-content">{{item2.recontents.substring(0, 140)}}</div>
          <div class="comment-content-second-time">{{item2.create_time}}</div>
          <div class="comment-content-second-photo" v-if="item2.comment_img_list && item2.comment_img_list.length > 0">
            <div v-for="photo_item in item2.comment_img_list" class="item_photo_row">
              <el-image :src="photo_item" class="reply_comment_photo" fit="cover"></el-image>
            </div>
          </div>
        </div>
      </div>
      <div class="comment-content-second-more" @click="getReplyAll" v-if="!showAllDone">查看全部{{infoCommentData.reply_count}}条评论</div>
      <div class="comment-content-second-more" style="height: 20px;"></div>
    </div>
    <Footer />
  </div>
</template>
<style src="@/pages/PMS/style/index.css"  scoped></style>
<style>
.data_items {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
  .data_item {
    width: 42%;
  }
}
.avatar_photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.comment_photo0 {
  max-width: 120px;
  width: 120px;
  text-align: center;
  height: 100px;
  overflow: hidden;
  border-radius: 8px;
}
.comment_photo1 {
  max-width: 260px;
  padding-left: 40px;
}
.comment_photo2 {
  display: flex;
  flex-direction: column;
  padding-left: 20px;
}
.comment_photo {
  width: 80px;
  height: 80px;
  border-radius: 8px;
}
.reply_comment_photo {
  width: 80px;
  height: 80px;
  border-radius: 8px;
}
.comment_pre_photo {
  width: 40px;
  height: 40px;
  margin-top: 2px;
  display: flex;
  flex-direction: row;
  margin-right: 8px;
}
.comment_pre_photo_in {
  border-radius: 8px;
}
.good-area {
  width: 170px;
  height:40px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  margin-left: 16px;
  cursor: pointer;
}
.good_icon {
  margin-left: 12px;
  width: 24px;
  height: 24px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center center;
}
.good-text {
  font-size: 18px;
  margin-right: 12px;
  color: #333333;
  line-height: 26px;
}
.comment-content2-input {
  width: 100%;
  height: 40px;
}
.comment-content2 {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  line-height: 30px;
  padding: 5px 5px;
  margin-top: 8px;
}
.comment-content2-2-column {
  width: 100%;
  display: flex;
  flex-direction: row;
}
.comment-content2-avatar {
  width: 48px;
  height: 48px;
  margin-right: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.comment-content2-2 {
  min-width: 92%;
  height: auto;
  display: flex;
}
.comment-content2-pre-image {
  width: 600px;
  height: 50px;
  display: grid;

}
.comment-content2-submit {
  width: 180px;
  height: 40px;
  display: flex;
  flex-direction: row;
  padding: 0;
  margin-left: 24px;
  margin-top: 4px;
}
.comment-content-second {
  width: 1200px;
  min-height: 62px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding-left:24px;
  .comment-content-second-left {
    width: 300px;
    display: flex;
    flex-direction: row;
    .comment-content-second-name {
      font-size: 14px;
      font-weight: 500;
      color: #333333;
      width: 42px;
      height: 42px;
      line-height: 18px;
      word-wrap: break-word;
      margin-right: 5px;
    }
    .comment-content-second-avatar {
      width: 60px;
      height: 78px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
  .comment-content-second-right {
    min-width: 90%;
    display: flex;
    flex-direction: column;
    justify-content:  flex-start;
    margin-left: 16px;
    .comment-content-second-content{
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      line-height: 20px;
    }
    .comment-content-second-time {
      font-size: 12px;
      color: #999999;
      line-height: 16px;
      margin-top: 4px;
    }
    .comment-content-second-photo {
      font-size: 14px;
      color: #333;
      line-height: 18px;
      height: 88px;
      display: flex;
      flex-direction: row;
      margin-right: 16px;
      margin-top: 8px;
      .item_photo_row {
        margin-right: 16px;
      }
    }
  }
}
.comment-content-second-more {
  font-size: 18px;
  font-weight: 500;
  margin-top: 8px;
  line-height: 24px;
  color: #45A1FF;
  cursor: pointer;
}

.article_photo {
  width: 160px;
  height: 160px;
  border-radius: 8px;
}
.article_photo1 {
  margin-top: 24px;
  max-width: 260px;
  padding-left: 24px;
}
.article_photo2 {
  display: flex;
  flex-direction: column;
  padding-left: 24px;
}
.comment_photo_div {
  max-width: 100px;
  width: 80px;
  text-align: center;
  height: 80px;
  overflow: hidden;
  margin-right: 16px;
  border-radius: 8px;
}
.avatar_photo2 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.avatar_photo3 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.click_go {
  width:60px;
  height: auto;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
.click_go_button {
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
}
</style>
